<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/Taskdetails/Taskdetails.css" />
		<link rel="stylesheet" href="../../css/vCloak.css" />
	</head>

	<body >

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">任务详情</h1>
		</header>

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper" :bookId="data.bookId" :bookUid="data.bookUid">
			<div class="mui-scroll" style="display:none;">
				<div class="end" v-if="data.hasBreakThrough">
					<img src="../../imges/Group 122492.png" />
				</div>
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<div class="mui-slider-item mui-slider-item-duplicate img">
							<a href="#">
								<img :src="data.bookPic" />
							</a>
						</div>
					</div>
				</div>
				<div class="slide">
					<div class="content">
						<div class="header">

							<div class="title">
								<div class="title_name" v-cloak>{{data.bookName}}</div>

								<div class="title_read" v-if="!data.hasBreakThrough">
									<div class="titlezi" v-cloak>{{data.correctRate}}%</div>
									<div class="titlezi_b">已完成</div>
								</div>

								<div class="title_read" v-if="data.hasBreakThrough">
									<div class="titlezi" style="color: #21B0FD;" v-cloak>{{data.correctRate}}%</div>
									<div class="titlezi_b">闯关正确率</div>
								</div>
								<div class="title_read" style="margin-right:16px;" v-if="data.hasBreakThrough">
									<div class="titlezi" v-cloak>{{data.readNoteCount }}</div>
									<div class="titlezi_b">读书笔记</div>
								</div>

							</div>
							<div>
								<div class="author">
									<div class="zi_a" v-cloak>
										作者：{{data.author}}
									</div>
									<div class="zi_b" v-cloak>
										出版社：{{data.press}}
									</div>
								</div>

								<div class="price">
									<button type="button" class="mui-btn mui-btn-warning btunoe">图书详情</button>
									<button type="button" class="mui-btn mui-btn-primary btunow" v-show="!data.hasComplete">阅读打卡</button>
									<button type="button" class="mui-btn truebtunow" v-if="data.hasComplete">已打卡</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--条-->

				<div class="passbutton" v-show="data.hasBreakThrough ">
					<div class="passbutton_img">
						<img src="../../imges/Group 10492.png" />
					</div>
					<div class="break">查看闯关</div>
				</div>

				<div class="contenta_conte" id="aa">
					<div class="contenta strip">
						<div class="strip_str">阅读笔记（<span class="wen" v-cloak>{{shu}}</span>）</div>
					</div>

					<!--分开-->
					<div class="contenta" v-for="(commen,index) in commen" :studentId="commen.studentId">
						<div class="contenta_a">
							<div class="content_img"><img :src="commen.avatar">

							</div>
							<div class="contenta_contenta">
								<span style="color: #333333;" v-cloak>{{commen.studentName }}</span>
								<span class="wufan" v-if="commen.likeCount != 0" v-cloak>{{commen.likeCount}}分</span>
								<div class="time" v-cloak>
									{{commen.writeDate }}
								</div>
								<div class="cotenta_Publish" v-cloak>{{commen.noteContent }}</div>

								<div class="contenta_img" v-if="commen.multiplePictureList != ''" v-for="item in commen.multiplePictureList">
									<img :src="item" data-preview-src="" :data-preview-group="index">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="operation">
				<div class="purchase" v-if="data.hasComplete && !data.hasBreakThrough"><button type="button" class="mui-btn mui-btn-primary through">答题闯关</button></div>
				<div class="seepurchase" v-else-if="data.hasBreakThrough"><button type="button" class="mui-btn mui-btn-primary through">闯关详情</button></div>
				<div class="bookshelf" id="note"><button type="button" class="mui-btn mui-btn-outlined">阅读分享</button></div>
			</div>
		</div>
		<!--<a href="../reading/TeacherProgram.html"></a>-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/mui.zoom.js"></script>
		<script src="../../js/libs/mui.previewimage.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script>
			var bookshelf = new Vue({
				el: '.mui-content',
				data: {
					commen: [],
					data: [],
					imgurl: '',
					cls: [],
					shu: ''
				},
				updated: function() {
					//阅读打卡
					$('.btunow').on("tap", function() {
						var obj = {}
						obj.bookuid = $("#pullrefresh").attr("uid")
						obj.planuid = $("#pullrefresh").attr("planuid")
						obj.source = $("#pullrefresh").attr("source")
						common.open('../reading/Chapternumber.html', '../reading/Chapternumber.html', obj)
					})
					//答题闯关
					$(".purchase").on("tap", function() {
						common.open('../Passthrough/Passreminder.html', '../Passthrough/Passreminder.html', $("#pullrefresh").attr("uid"))
					})
					//阅读笔记
					$("#note").on("tap", function() {

						common.open('../reading/note.html', '../reading/note.html', $("#pullrefresh").attr("uid"))
					})
					//图书详情
					$(".btunoe").on("tap", function() {
						common.open('../bookdetails/details.html', '../bookdetails/details.html', $("#pullrefresh").attr("uid"))
					})
					//查看闯关
					$(".passbutton").on("tap", function() {
						common.open('../Passthrough/View_results.html', '../Passthrough/View_results.html', $("#pullrefresh").attr("uid"))
					})
					//查看闯关
					$(".seepurchase").on("tap", function() {
						common.open('../Passthrough/View_results.html', '../Passthrough/View_results.html', $("#pullrefresh").attr("uid"))
					})
				}
			})

			/*mui.init({
				beforeback: function() {　　　　 //获得父页面的webview
					var list = plus.webview.currentWebview('../reading/TeacherProgram.html').opener();　　　　 //触发父页面的自定义事件(refresh),从而进行刷新
					mui.fire(list, 'Taskdetails');
					//返回true,继续页面关闭逻辑
					return true;
				}
			});*/

			window.addEventListener("qianguan", function() {
				xuaxih()

			})

			window.addEventListener("view", function() {
				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					var obj = self.parameter;
					//				var uld = 
					$("#pullrefresh").attr("planuid", obj.planuid)
					$("#pullrefresh").attr("uid", obj.bookuid)
					$("#pullrefresh").attr("source", obj.source)
					mui('.mui-slider').slider().setStopped(true)
					common.ajax('student/queryPlanTask', {
						uid: common.uid,
						token: common.token,
						bookUid: obj.bookuid
					}, function(data) {
						if(data.code == 200) {
							bookshelf.data = data.data
						} else {
							mui.toast(data.message)
						}
					}, 'get')
				})

			})
			window.addEventListener('shuaxin', function(e) { //执行刷新
				common.ajax("student/note/queryReadNote", {
						uid: common.uid,
						token: common.token,
						bookUid: $("#pullrefresh").attr("uid"),
						page: temp++,
						pageSize: 100
					},
					function(data) {
						
						if(data.code == 200) {
							if(!data.data.hasNextPage) {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							} else {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh();
							}
							window.addEventListener('AddNew', function() {
								plus.webview.getWebviewById('../Taskdetails/Taskdetails.html').reload();
							});
							bookshelf.commen = data.data.list
							bookshelf.shu = data.data.list.length
						} else {
							mui.toast(data.message)
						}
					}, "get")

				window.addEventListener("qianguan", function() {
					xuaxih()
				})

				window.addEventListener("view", function() {
					xuaxih()
				})
				window.location.reload()
			});

			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			mui.previewImage();

			var temp = 1
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				//				window.addEventListener('refresh', function(e) { //执行刷新
				//					location.reload();
				//				});
				common.ajax("student/note/queryReadNote", {
						uid: common.uid,
						token: common.token,
						bookUid: $("#pullrefresh").attr("uid"),
						page: temp++,
						pageSize: 100
					},
					function(data) {
						$(".mui-scroll").show()
						if(data.code == 200) {
							if(!data.data.hasNextPage) {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							} else {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh();
							}
							window.addEventListener('AddNew', function() {
								plus.webview.getWebviewById('../Taskdetails/Taskdetails.html').reload();
							});
							for(var i = 0; i < data.data.list.length; i++) {
								bookshelf.commen.push(data.data.list[i])
							}
							bookshelf.shu = data.data.list.length
						} else {
							mui.toast(data.message)
						}
					}, "get")
			}

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var obj = self.parameter;
				$("#pullrefresh").attr("planuid", obj.planuid)
				$("#pullrefresh").attr("uid", obj.bookuid)
				$("#pullrefresh").attr("source", obj.source)
				mui('.mui-slider').slider().setStopped(true)
				common.ajax('student/queryPlanTask', {
					uid: common.uid,
					token: common.token,
					bookUid: obj.bookuid
				}, function(data) {
					if(data.code == 200) {
						bookshelf.data = data.data
						//						console.log(data.data)
					} else {
						mui.toast(data.message)
					}
				}, 'get')

				if(mui.os.plus) {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 300);
				} else {
					mui.ready(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					});
				}

			})

			function xuaxih() {
				mui.plusReady(function() {
					var self = plus.webview.currentWebview();
					var obj = self.parameter;
					//				var uld = 
					$("#pullrefresh").attr("planuid", obj.planuid)
					$("#pullrefresh").attr("uid", obj.bookuid)
					$("#pullrefresh").attr("source", obj.source)
					mui('.mui-slider').slider().setStopped(true)
					common.ajax('student/queryPlanTask', {
						uid: common.uid,
						token: common.token,
						bookUid: obj.bookuid
					}, function(data) {

						if(data.code == 200) {
							bookshelf.data = data.data
							//						console.log(data.data)
						} else {
							mui.toast(data.message)
						}
					}, 'get')
				})
			}
		</script>
	</body>

</html>